<div class="panel panel-default search-panel">
    <div class="panel-body">
        <div class="pull-left">
            <form class="form-inline">
                <div class="form-group">
                    <select class="form-control" ng-model="query_host">
                        <option value="">选择主机</option>
                        <option ng-repeat="host in hosts" value="{{ host }}" ng-selected="query_host == host">{{ host }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" ng-model="query_collectionId">
                        <option value="">选择集合</option>
                        <option ng-repeat="collection in collections" value="{{ collection.id }}" ng-selected="query_collectionId == collection.id">{{ collection.name }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" ng-model="query_state">
                        <option value="">选择状态</option>
                        <option ng-repeat="state in states" value="{{ state }}" ng-selected="query_state == state">{{ state }}</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-default" ng-click="query()">查找</button>
            </form>
        </div>
        <div class="pull-right">
            <button type="button" class="btn btn-primary" ng-click="edit()">
                创建副本
                <span class="glyphicon glyphicon-plus-sign"></span>
            </button>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<table class="table table-striped table-bordered table-hover" ng-controller="GlobalController">
    <tr>
        <th>名称</th>
        <th>Shard</th>
        <th>状态</th>
        <th>文档数</th>
        <th>段数量</th>
        <th>运行时间</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="replica in paged.list">
        <td>{{ replica.coreName }}</td>
        <td>{{ shardMap[replica.shardId].name }}</td>
        <td>
            <span class="label label-default" style="background-color: #007fcc;" ng-if="STATE_LEADER == replica.state">{{ replica.state }}</span>
            <span class="label label-default" style="background-color: #57A957;" ng-if="STATE_ACTIVE == replica.state">{{ replica.state }}</span>
            <span class="label label-default" style="background-color: #d5dd00;" ng-if="STATE_RECOVERING == replica.state">{{ replica.state }}</span>
            <span class="label label-default" style="background-color: #c48f00;" ng-if="STATE_DOWN == replica.state">{{ replica.state }}</span>
            <span class="label label-default" style="background-color: #C43C35;" ng-if="STATE_RECOVERY_FAILED == replica.state">{{ replica.state }}</span>
            <span class="label label-default" style="background-color: #e0e0e0;" ng-if="STATE_GONE == replica.state">{{ replica.state }}</span>
        </td>
        <td>{{ monitorMap[replica.id] }}</td>
        <td>{{ replica.segmentNum }}</td>
        <td>
            <span ng-if="replica.uptime >= (24 * 3600 * 1000)">{{(replica.uptime / (24 * 3600 * 1000)) | number:0}}天{{((replica.uptime / (3600 * 1000)) % 24) | number:0}}</span>
            <span ng-if="replica.uptime < (24 * 3600 * 1000)">{{(replica.uptime / (3600 * 1000)) | number:0}} 小时</span>
        </td>
        <td>
            <button type="button" class="btn btn-danger" ng-click="confirmRemove(replica)">删除</button>
        </td>
    </tr>
</table>
<div>
    <div ng-include="'app/common/view/paged.html'"></div>
    <div class="clearfix"></div>
</div>

<!-- edit dialog -->
<div class="modal fade" id="editDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">
                    <span ng-if="save_id == null">创建滤词</span>
                    <span ng-if="save_id != null">编辑滤词</span>
                </h4>
            </div>
            <div class="modal-body">
                <div id="editErrorMsg" class="alert alert-danger" ng-if="save_err">{{ save_errMsg }}</div>
                <form class="form-horizontal" role="form" id="editForm">
                    <div class="form-group hidden">
                        <label for="save_id" class="col-sm-2 control-label">id</label>
                        <div class="col-sm-9">
                            <input type="hidden" class="form-control" id="save_id" ng-model="save_id" />
                        </div>
                    </div>
                    <div id="save_account_group" class="form-group">
                        <label for="save_replicaId" class="col-sm-2 control-label">索引</label>
                        <div class="col-sm-9">
                            <select class="form-control" ng-model="save_replicaId" id="save_replicaId" ng-disabled="save_replicaId_disabled">
                                <option value="">全局索引</option>
                                <option ng-repeat="replica in replicas" value="{{ replica.id }}" ng-selected="replica.id == save_replicaId">{{ replica.name }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_name" class="col-sm-2 control-label" ng-class="{'has-error': save_name_err}">滤词名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="save_name" ng-model="save_name" placeholder="查询表达式" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_remark" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-9">
                            <textarea id="save_remark" ng-model="save_remark" class="form-control" placeholder="描述"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" ng-click="save()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- delete dialog -->
<div class="modal fade" id="removeDialog" tabindex="-1">
    <input type="hidden" id="removeId" ng-model="removeId" />
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">删除确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">您确认要删除{{ removeName }}吗</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="remove()">确认删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- disable dialog -->
<div class="modal fade" id="disableDialog" tabindex="-1">
    <input type="hidden" id="disableId" ng-model="disableId" />
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">禁用确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">您确认要禁用{{ disableName }}吗。</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="disable()">确认禁用</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- disableAll dialog -->
<div class="modal fade" id="disableAllDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">批量禁用确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">您确认要批量禁用吗。</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="disableAll()">确认禁用</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>